<template>
  <div class="clock-lunar">
    <!-- 刻度轮 -->
    <div
      :class="`scales-${item.unit} scales`"
      v-for="(item, index) in dialPlate"
      :key="index"
      :style="{
        transform: `rotate(${
          isAnimationOver ? (360 / item.scales.length) * item.deg : 0
        }deg)`
      }"
      :ref="item.unit"
    >
      <!-- 刻度 -->
      <div
        :class="`scale-${item.unit} scale`"
        v-for="(itemSon, indexSon) in item.scales"
        :key="indexSon"
        :style="{
          transform: `rotate(${-(360 / item.scales.length) *
            indexSon}deg) translate(0, -50%)`
        }"
      >
        <!-- 离心距 -->
        <div :class="`eccentricity-${item.unit} eccentricity`" />
        <!-- 刻度值 -->
        <div
          class="scale-value"
          :class="{ 'time-now': itemSon === item.current && isAnimationOver }"
        >
          <!-- 刻度文字 -->
          {{ itemSon }}
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <el-button type="primary" round class="btn" @click="goBack">阳历</el-button>
  </div>
</template>

<script>
import { getTimeNow } from '@/utils/timeDetail'
import { lunar, lunarContrast } from '@/utils/lunar1900-2100'
import { rotateSlow } from '@/utils/animateSlow'
export default {
  name: 'ClockLunar',
  data () {
    return {
      // 生肖
      zodiac: [
        '鼠',
        '牛',
        '虎',
        '兔',
        '龙',
        '蛇',
        '马',
        '羊',
        '猴',
        '鸡',
        '狗',
        '猪'
      ],
      // 节气
      terms: [
        '立春',
        '雨水',
        '惊蛰',
        '春分',
        '清明',
        '谷雨',
        '立夏',
        '小满',
        '芒种',
        '夏至',
        '小暑',
        '大暑',
        '立秋',
        '处暑',
        '白露',
        '秋分',
        '寒露',
        '霜降',
        '立冬',
        '小雪',
        '大雪',
        '冬至',
        '小寒',
        '大寒'
      ],
      // 时辰
      twelelHours: [
        '子時',
        '丑時',
        '寅時',
        '卯時',
        '辰時',
        '巳時',
        '午時',
        '未時',
        '申時',
        '酉時',
        '戌時',
        '亥時'
      ],
      // 刻度
      quarterPoint: ['壹刻', '贰刻', '参刻', '肆刻'],
      // 当前时间
      timeNow: new Date(),
      // 实时更新定时器标识
      updateTimeID: null,
      // 动态刻度轮
      activeScales: {
        zodiac: [],
        year: [],
        month: [],
        day: [],
        term: [],
        hour: [],
        quarter: []
      },
      // 动画是否结束
      isAnimationOver: false
    }
  },
  computed: {
    // 当前阳历时间
    timeNowSolar () {
      return getTimeNow(this.timeNow)
    },
    // 当前阴历时间
    timeNowLunar () {
      // 对照阴历得到字符对象
      return lunarContrast(this.timeNowSolar, true, true)
    },
    // 当前阴历时间刻度索引
    timeNowLunarIndex () {
      return {
        year: this.zodiacYearsRing.indexOf(this.timeNowLunar.year),
        month: this.monthsOfThisYear.indexOf(this.timeNowLunar.month),
        day: this.daysOfThisMonth.indexOf(this.timeNowLunar.day),
        term: this.terms.indexOf(this.timeNowLunar.term),
        hour: this.twelelHours.indexOf(this.timeNowLunar.hour),
        quarter: this.quarterPoint.indexOf(this.timeNowLunar.quarter)
      }
    },
    // 生肖年轮
    zodiacYearsRing () {
      return lunar[this.timeNowSolar.year].yearsList
    },
    // 今年月轮
    monthsOfThisYear () {
      return lunar[this.timeNowSolar.year].monthsList
    },
    // 本月日轮
    daysOfThisMonth () {
      return lunar[this.timeNowSolar.year].daysList[
        this.timeNowSolar.month - 1
      ].map(v => v.dayString)
    },
    // 刻度表盘
    dialPlate () {
      return [
        {
          scales: this.activeScales.zodiac,
          unit: 'zodiac',
          deg: this.timeNowLunarIndex.year,
          current: this.zodiac[this.timeNowLunarIndex.year]
        },
        {
          scales: this.activeScales.year,
          unit: 'year',
          deg: this.timeNowLunarIndex.year,
          current: this.timeNowLunar.year
        },
        {
          scales: this.activeScales.month,
          unit: 'month',
          deg: this.timeNowLunarIndex.month,
          current: this.timeNowLunar.month
        },
        {
          scales: this.activeScales.day,
          unit: 'day',
          deg: this.timeNowLunarIndex.day,
          current: this.timeNowLunar.day
        },
        {
          scales: this.activeScales.term,
          unit: 'terms',
          deg: this.timeNowLunarIndex.term,
          current: this.timeNowLunar.term
        },
        {
          scales: this.activeScales.hour,
          unit: 'hour',
          deg: this.timeNowLunarIndex.hour,
          current: this.timeNowLunar.hour
        },
        {
          scales: this.activeScales.quarter,
          unit: 'quarter',
          deg: this.timeNowLunarIndex.quarter,
          current: this.timeNowLunar.quarter
        }
      ]
    }
  },
  methods: {
    // 更新当前时间
    updateTimeNow () {
      this.updateTimeID = setInterval(() => {
        this.timeNow = new Date()
      }, 1)
    },

    // 预装动态刻度轮
    pushActiveScales () {
      this.zodiac.forEach(() => {
        this.activeScales.zodiac.push('')
      })
      this.zodiacYearsRing.forEach(() => {
        this.activeScales.year.push('')
      })
      this.monthsOfThisYear.forEach(() => {
        this.activeScales.month.push('')
      })
      this.daysOfThisMonth.forEach(() => {
        this.activeScales.day.push('')
      })
      this.terms.forEach(() => {
        this.activeScales.term.push('')
      })
      this.twelelHours.forEach(() => {
        this.activeScales.hour.push('')
      })
      this.quarterPoint.forEach(() => {
        this.activeScales.quarter.push('')
      })
    },

    // 填充刻度
    fillScale (arrA, arrB, fps, callBack) {
      let i = 0
      const timeID = setInterval(() => {
        arrA[i] = arrB[i++]
        if (arrA[arrA.length - 1] === arrB[arrB.length - 1]) {
          clearInterval(timeID)
          callBack()
        }
      }, fps)
    },

    // 刻度依序入场
    scalesEntersInOrder () {
      this.fillScale(this.activeScales.zodiac, this.zodiac, 100, () => {
        this.fillScale(
          this.activeScales.year,
          this.zodiacYearsRing,
          100,
          () => {
            this.fillScale(
              this.activeScales.month,
              this.monthsOfThisYear,
              100,
              () => {
                this.fillScale(
                  this.activeScales.day,
                  this.daysOfThisMonth,
                  50,
                  () => {
                    this.fillScale(
                      this.activeScales.term,
                      this.terms,
                      50,
                      () => {
                        this.fillScale(
                          this.activeScales.hour,
                          this.twelelHours,
                          100,
                          () => {
                            this.fillScale(
                              this.activeScales.quarter,
                              this.quarterPoint,
                              200,
                              () => {
                                // 替换结束，刻度盘旋转缓动
                                this.scalesRotateSlow()
                              }
                            )
                          }
                        )
                      }
                    )
                  }
                )
              }
            )
          }
        )
      })
    },

    // 刻度缓慢循环到位
    scalesRotateSlow () {
      rotateSlow(
        this.$refs.zodiac[0],
        {
          rotate:
            (360 / this.dialPlate[0].scales.length) * this.dialPlate[0].deg,
          fps: 20,
          range: 12
        },
        () => {
          rotateSlow(
            this.$refs.year[0],
            {
              rotate:
                (360 / this.dialPlate[1].scales.length) * this.dialPlate[1].deg,
              fps: 20,
              range: 12
            },
            () => {
              rotateSlow(
                this.$refs.month[0],
                {
                  rotate:
                    (360 / this.dialPlate[2].scales.length) *
                    this.dialPlate[2].deg,
                  fps: 20,
                  range: 12
                },
                () => {
                  rotateSlow(
                    this.$refs.day[0],
                    {
                      rotate:
                        (360 / this.dialPlate[3].scales.length) *
                        this.dialPlate[3].deg,
                      fps: 20,
                      range: this.daysOfThisMonth.length
                    },
                    () => {
                      rotateSlow(
                        this.$refs.terms[0],
                        {
                          rotate:
                            (360 / this.dialPlate[4].scales.length) *
                            this.dialPlate[4].deg,
                          fps: 20,
                          range: 24
                        },
                        () => {
                          rotateSlow(
                            this.$refs.hour[0],
                            {
                              rotate:
                                (360 / this.dialPlate[5].scales.length) *
                                this.dialPlate[5].deg,
                              fps: 20,
                              range: 12
                            },
                            () => {
                              rotateSlow(
                                this.$refs.quarter[0],
                                {
                                  rotate:
                                    (360 / this.dialPlate[6].scales.length) *
                                    this.dialPlate[6].deg,
                                  fps: 20,
                                  range: 12
                                },
                                () => {
                                  setTimeout(() => {
                                    // 缓动动画结束
                                    this.isAnimationOver = true
                                  }, 1000)
                                }
                              )
                            }
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    },

    // 返回阳历页
    goBack () {
      this.$router.go(-1)
    }
  },
  created () {
    // 实时更新当前时间
    this.updateTimeNow()
    // 预装动态刻度轮
    this.pushActiveScales()
    // 刻度依序入场
    this.scalesEntersInOrder()
  },
  beforeDestory () {
    // 移除实时更新定时器
    clearInterval(this.updateTimeID)
  }
}
</script>

<style lang="less">
.clock-lunar {
  position: relative;
  width: 100%;
  height: 100%;
  // 按钮
  .btn {
    position: absolute;
    top: 50px;
    left: 50px;
  }
  // 刻度轮
  .scales {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    // 刻度
    .scale {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 30px;
      transform-origin: 0 0;
      display: flex;
      // 离心距
      .eccentricity {
        height: 100%;
      }
      // 刻度值
      .scale-value {
        width: 48px;
        height: 100%;
        line-height: 30px;
        font-size: 16px !important;
      }
      // 当前时间
      .time-now {
        color: rgb(252, 1, 26);
      }
    }
  }
  // 生肖刻度轮
  .scales-zodiac {
    // 生肖刻度离心距
    .eccentricity-zodiac {
      width: 50px;
    }
  }
  // 年份刻度轮
  .scales-year {
    // 年份刻度离心距
    .eccentricity-year {
      width: 75px;
    }
  }
  // 月份刻度轮
  .scales-month {
    // 月份刻度离心距
    .eccentricity-month {
      width: 130px;
    }
  }
  // 日期刻度轮
  .scales-day {
    // 日期刻度离心距
    .eccentricity-day {
      width: 170px;
    }
  }
  // 节气刻度轮
  .scales-terms {
    // 节气刻度离心距
    .eccentricity-terms {
      width: 210px;
    }
  }
  // 时辰刻度轮
  .scales-hour {
    // 时辰刻度离心距
    .eccentricity-hour {
      width: 250px;
    }
  }
  // 刻度轮
  .scales-quarter {
    // 刻度离心距
    .eccentricity-quarter {
      width: 290px;
    }
  }
}
</style>
